<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #search-form {
            margin: 50px auto;
            width: 300px;
        }
        #search-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
        }
        #search-btn {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #weather-result {
            margin-top: 30px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="search-form">
        <input type="text" id="search-input" placeholder="输入城市名称查询天气...">
        <button id="search-btn">查询天气</button>
    </div>
    
    <div id="weather-result">
        <h2 id="city-name"></h2>
        <p><strong>温度:</strong> <span id="temperature"></span></p>
        <p><strong>描述:</strong> <span id="description"></span></p>
    </div>
    
    <script>
        document.getElementById('search-btn').addEventListener('click', function() {
            const cityName = document.getElementById('search-input').value.trim();
            if (cityName !== 'http://d1.weather.com.cn/sk_2d/城市id.html?_= 毫秒级时间戳') {
                // 这里应该调用真实API获取天气数据，但为了示例，我们模拟数据
                const mockWeatherData = {
                    "temperature": "25°C",
                    "description": "晴朗"
                };
                displayWeather(cityName, mockWeatherData);
            } else {
                alert("请输入城市名称！");
            }
        });
    
        function displayWeather(cityName, weatherData) {
            document.getElementById('city-name').innerText = cityName + " 的天气";
            document.getElementById('temperature').innerText = weatherData.temperature;
            document.getElementById('description').innerText = weatherData.description;
            document.getElementById('weather-result').style.display = "block";
        }
    </script>
    <div class="assignment">
        <a href="https://gitee.com/from-shu/text">代码仓库</a>
    </div>
</body>
</html>